<template>
	<view>

		<!-- 分享选项弹窗 -->
		<su-popup :show="localShow" @update:show="(val) => $emit('update:show', val)" position="bottom" round="20"
			:overlay="true" @close="handleClose">
			<view class="share-popup">
				<view class="share-popup__title">转发</view>
				<view class="share-popup__content ss-flex justify-around">
					<view class="share-item ss-flex-col justify-center align-center">
						<button open-type="share" class="share-button" @click="handlWechatShare">
							<image class="share-icon wechat-icon"
								src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250311/8ee6ff4103e85c07d876bc140ab5700c.png"
								mode="" />
							<view class="share-text">微信好友</view>
						</button>
					</view>
					<view class="share-item ss-flex-col justify-center align-center">
						<button class="share-button" @click="handleMomentsShare">
							<image class="share-icon moments-icon"
								src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250311/118c02ac304c0ed6fa4a7143d4f48a76.png"
								mode="" />
							<view class="share-text">朋友圈</view>
						</button>
					</view>
					<view class="share-item ss-flex-col justify-center align-center">
						<button class="share-button" @click="handlePrivateMessage">
							<image class="share-icon qrcode-icon"
								src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/sns/20250316/8edc4c4685d7cef0b4706eaabc8bebea.png"
								mode="" />
							<view class="share-text">私信</view>
						</button>
					</view>
				</view>
				<view class="share-popup__cancel ss-m-t-20" @click="handleClose">取消</view>
			</view>
		</su-popup>

		<!-- 私信好友弹窗 -->
		<uni-popup ref="messagePopup" type="bottom" background-color="#fff">
			<view class="share_popup">
				<view class="search-box">
					<input type="text" placeholder="搜索" class="search-input" v-model="searchKeyword"
						@confirm="handleSearch" @blur="handleSearch" />
				</view>

				<view class="tab-bar">
					<text v-for="(item, index) in tabList" :key="index"
						:class="['tab-item', currentTab === index ? 'active' : '']" @click="switchTab(index)">
						{{ item }}
					</text>
				</view>

				<scroll-view scroll-y class="friend-list" @scrolltolower="loadmore">
					<template v-if="pagination.data&&pagination.data.length>0">
						<view class="friend-item" v-for="(item, index) in pagination.data" :key="index">
							<image class="friend-avatar" :src="calcSrc(item)" mode="aspectFill" />
							<view class="friend-info">
								<text class="friend-name">{{ item?.nickname||'--' }}</text>
							</view>
							<button @click="handleSend(item)" class="send-btn">发送</button>
						</view>
					</template>
					<view class="no-more" v-if="loadStatus=='noMore'">没有更多了</view>
				</scroll-view>

				<view class="cancel-btn" @click="closeMessagePopup">
					<text>取消</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import sheep from '@/sheep';
	import { MPid } from "@/sheep/config/index.js"
	// #ifdef APP
	import imStore from "@/im/store/im.js"
	// #endif
	import {
		concat
	} from 'lodash'
	export default {
		name: 'PopupShare',

		props: {
			show: {
				type: Boolean,
				default: false,
			},
			findId: {
				type: [String, Number],
				default: '',
			},
			type: {
				type: String,
				default: 'goods'
			},
			shareInfo: {
				type: Object,
				default () {},
			},
		},

		data() {
			return {
				sheep,
				localShow: this.show,
				searchKeyword: '',
				currentTab: 0,
				tabList: ['好友', '群聊', '我的团队', '我的商户'],

				pagination: {
					data: [],
					current_page: 1,
					total: 1,
					last_page: 1,
				},
				loadStatus: '',
				page: 0,
			};
		},
		watch: {
			show(newVal) {
				this.localShow = newVal;
				if (newVal) {
					this.get_share_list();
				}
			},
		},
		mounted() {


			if (sheep.$store('user')?.userInfo?.id) {
				this.user_id = sheep.$store('user').userInfo.id;
			}
		},

		methods: {

			get_share_list(page = 1, list_row = 10) {
				let type = '';

				type = this.tabList[this.currentTab] == '我的团队' ? 'BDM群' : (this.tabList[this.currentTab] == '我的商户' ?
					'商家群' : this.tabList[this.currentTab]);

				this.loadStatus = 'loading';
				sheep.$api.hotel.shareList({
					search: this.searchKeyword,
					type: type,
					page: this.page,
					list_row: list_row,
				}).then((res) => {
					console.log('shareList',res)
					if (res.data.code === 0 && res.data.data.last_page) {

						let list = concat(this.pagination.data, res.data.data.data);

						this.pagination = {
							...res.data.data,
							data: list,
						};

						if (this.page < this.pagination.last_page) {

							this.loadStatus = 'more';
						} else {

							this.loadStatus = 'noMore';
						}
					}
				});
			},
			loadmore() {

				if (this.loadStatus !== 'noMore') {
					this.page++;
					this.get_share_list(this.page);
				}
			},
			handleClose() {
				this.$emit('update:show', false);
			},
			calcSrc(item) {
				if (item && item.avatar) {
					if (item.avatar.startsWith('https')) {
						return item.avatar
					} else {
						return sheep.$url.cdn(item.avatar);
					}
				}
			},
			handlWechatShare(){
				this.handleClose();
				// #ifdef APP
				uni.share({
					provider: 'weixin',
					scene: 'WXSceneSession',
					type: 5,
					title: this.shareInfo.title,
					imageUrl: this.shareInfo.image,
					miniProgram:{
						id:MPid,
						path:this.shareInfo.path,
						type:0,
						webUrl:this.shareInfo.link,
					},
					success: (res) => {
						console.log('success:' + JSON.stringify(res));
					},
					fail: (err) => {
						console.log('fail:' + JSON.stringify(err));
					},
				});
				// #endif
			},
			// 添加其他必要的方法
			handleMomentsShare() {
				// #ifdef MP
				uni.showToast({
					title: '请点击右上角选择复制链接分享朋友圈',
					icon: 'none',
				});
				// #endif
				// #ifdef APP
				uni.share({
					provider: 'weixin',
					scene: 'WXSceneTimeline',
					type: 0,
					title:this.shareInfo.title,
					imageUrl: this.shareInfo.image,
					href: this.shareInfo.link,
					success: (res) => {
						console.log('success:' + JSON.stringify(res));
					},
					fail: (err) => {
						console.log('fail:' + JSON.stringify(err));
					},
				});
				// #endif
				this.handleClose();
			},

			handlePrivateMessage() {
				console.log('handlePrivateMessage')
				this.handleClose();

				this.$refs.messagePopup.open('bottom');
			},

			closeMessagePopup() {
				this.$refs.messagePopup.close();

			},

			handleSearch() {
				this.loadStatus = '';
				this.page = 0;
				this.pagination = {
					data: [],
					current_page: 0,
					total: 1,
					last_page: 1,
				};
				this.loadmore();
			},

			switchTab(index) {

				this.currentTab = index;
				this.loadStatus = '';
				this.page = 0;
				this.pagination = {
					data: [],
					current_page: 0,
					total: 1,
					last_page: 1,
				};
				this.loadmore();
			},
			async handleSend(item) {
				const params = {
					pattern: this.currentTab === 0 ? 'msg' : 'group',
					group_id: this.currentTab === 0 ? '' : item.id,
					to_account: this.currentTab === 0 ? item.id : '',
					id: this.findId,
					type: this.type,
					user_id:sheep.$store('user').userInfo.id,
				};

				uni.showLoading({
					title: '发送中...',
					mask: true,
				});

				let to = {
					aim: this.currentTab === 0 ? 'message' : 'groupMessage',
					service: {
						mobile: this.currentTab === 0 ? item.mobile : (item.id.startsWith('GROUP') ? item.id :
							'GROUP' + item.id),
					}
				}


				sheep.$api.merchant.send_share(params).then((res) => {
						uni.hideLoading();
						if (res.error == 0) {
							uni.showToast({
								title: res.msg,
								icon: 'success',
								duration: 600,
							});

							setTimeout(() => {
								// #ifdef APP
								  imStore().webQueryAnalysis(to)
								  // #endif
								// #ifndef APP
								uni.navigateTo({
									url: "/im/pages/web?to=" + encodeURIComponent(JSON.stringify(to)),
								})
								// #endif
							}, 1000)
						}
					})
					.catch((err) => {
						// 发生错误时也要隐藏loading
						uni.hideLoading();
						uni.showToast({
							title: '发送失败',
							icon: 'error',
						});
					});

			},
		},
	};
</script>

<style lang="less" scoped>
	.share-popup {
		padding: 30rpx;
		background-color: #fff;
		border-radius: 24rpx 24rpx 0 0;

		&__title {
			font-size: 32rpx;
			text-align: center;
			color: #333;
			margin-bottom: 40rpx;
		}

		&__content {
			padding: 20rpx 0;
		}

		&__cancel {
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			font-size: 32rpx;
			color: #333;
			border-top: 1rpx solid #eee;
		}

		.share-item {
			padding: 10rpx;

			.share-button {
				background: transparent;
				border: none;
				padding: 0;
				margin: 0;
				line-height: normal;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				&::after {
					border: none;
				}
			}

			.share-icon {
				width: 80rpx;
				height: 80rpx;
				margin-bottom: 20rpx;
			}

			.share-text {
				font-size: 28rpx;
				color: #333;
				margin-top: 10rpx;
			}
		}
	}

	.share_popup {
		background-color: #fff;
		height: 70vh;
		border-radius: 20rpx 20rpx 0 0;
		padding: 30rpx 30rpx 130rpx;
		display: flex;
		flex-direction: column;
		position: relative;

		.search-box {
			margin-bottom: 20rpx;
			display: flex;
			padding: 0 20rpx;

			.search-input {
				flex: 1;
				background-color: #f5f5f5;
				height: 70rpx;
				border-radius: 35rpx;
				padding: 0 30rpx;
				font-size: 28rpx;
			}
		}

		.tab-bar {
			display: flex;
			padding: 30rpx 0;
			border-bottom: 1rpx solid #eee;

			.tab-item {
				flex: 1;
				text-align: center;
				font-size: 28rpx;
				color: #666;

				&.active {
					color: #333;
					font-weight: bold;
				}
			}
		}

		.friend-list {
			flex: 1;
			height: calc(100% - 200rpx);
			overflow-y: auto;

			.no_more {
				text-align: center;
				font-size: 24rpx;
				color: #999;
				padding: 20rpx 0;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.friend-item {
				display: flex;
				align-items: center;
				padding: 20rpx 0;

				.friend-avatar {
					width: 80rpx;
					height: 80rpx;
					border-radius: 10rpx;
				}

				.friend-info {
					flex: 1;
					padding: 0 20rpx;

					.friend-name {
						font-size: 28rpx;
						color: #333;
					}
				}

				.send-btn {
					width: 120rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					background-color: #07c160;
					color: #fff;
					font-size: 28rpx;
					border-radius: 30rpx;
					padding: 0;
				}
			}
		}

		.cancel-btn {
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 32rpx;
			color: #333;
			border-top: 1rpx solid #eee;
			background: #fff;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
		}
	}
</style>